<template>
    <div class="home">
        <div class="top-bg absolute h-[57px] -z-10 
        w-screen  "></div>
        <header>
            <van-sticky :offset-top="0">
            <div class="bg-white">
                <div class="text-[3rem] font-myfont flex justify-center items-center">
                    今日共计消费
                </div>
                <div class="text-[3rem] font-myfont  flex justify-center items-center ">
                    {{ totalPrice }}元
                </div>
            </div>
        </van-sticky>
        </header>
        <!-- <section class="navbar flex overflow-x-scroll   border-t  border-t-2  border-b border-b-2  border-black ">
                <div class="navbar-item flex flex-col flex-[0_0_auto] w-16 font-myfont  "
                v-for="item in topBarState"
                :key="item.title"
                >
                <div class="navbar-item__text text-[1rem] pl-2 ">{{ item.title }}</div>
                </div>
        </section> -->
        <card/>
    </div>
</template>

<script setup lang="ts">
// 数据
// pinia 数据管理 + 组件显示
import { toRefs, ref } from 'vue'
import {useHomeStore} from '@/store/homeStore'
import card from '@/components/card.vue'

const homeStore = useHomeStore()

const {
    topBarState,
    consumptionState,
    totalPrice
} = toRefs(homeStore)



// toRefs一次性将响应式对象拿出来并解构,立马可以参与到响应式绑定





</script>

<style lang="scss" scoped></style>